<template>
  <el-container>
    <el-main>
      <el-row type="flex" justify="center">
        <el-col class="reset-pwd" :span="12" style="border: 1px solid gray">
          <h3>找回密码</h3>
          <el-steps :active="count" align-center>
            <el-step title="输入手机号码"></el-step>
            <el-step title="重置密码"></el-step>
            <el-step title="完成"></el-step>
          </el-steps>
          <el-row type="flex" justify="center" style="margin-top: 30px">
            <el-col :span="8">
              <el-form :model="userForm2" ref="resetForm" :rules="userForm2Rules" v-if="setup !== 3">
                <el-form-item prop="tel">
                  <el-input v-model="userForm2.tel" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <div v-if="setup == 2">
                  <el-form-item prop="code">
                    <el-row>
                      <el-col :span="14">
                        <el-input v-model="userForm2.code" placeholder="请输入验证码" :disabled="isDisable"></el-input>
                      </el-col>
                      <el-col :span="6">
                        <el-button type="info" @click="getCode" :disabled="isDisable">获取验证码</el-button>
                      </el-col>
                    </el-row>
                  </el-form-item>
                  <el-form-item prop="pwd1">
                    <el-input v-model="userForm2.pwd1" placeholder="请输入新密码" :disabled="isDisable">></el-input>
                  </el-form-item>
                  <el-form-item prop="pwd2">
                    <el-input v-model="userForm2.pwd2" placeholder="再次输入密码" :disabled="isDisable">></el-input>
                  </el-form-item>
                </div>
                <el-form-item>
                  <el-button style="width: 100%" type="primary" @click="setupNext">下一步</el-button>
                </el-form-item>
              </el-form>
              <div v-else>
                <el-result icon="success" title="密码修改成功" subTitle="点击按钮重新登陆">
                  <template slot="extra">
                    <el-button type="success" @click="goLogin">重新登录</el-button>
                  </template>
                </el-result>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import { getCheckCode, checkCode, resetPassword } from '@/config/api.js'
export default {
  name: 'ResetPassword',
  data() {
    return {
      setup: 1,
      count: 1,
      isDisable: true,
      userForm2: {
        tel: '1',
        code: '',
        pwd1: '',
        pwd2: ''
      },
      userForm2Rules: {
        tel: [
          { required: true, message: '请输入11位手机号码', trigger: 'blur' }
          // {
          //   pattern: /^1[3456789]\d{9}$/,
          //   message: '只能输入11个数字',
          //   trigger: 'blur'
          // }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        pwd1: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        pwd2: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    getCode() {
      getCheckCode({ phone: this.userForm2.tel }).then(res => {
        if (res.code === 200) {
          this.userForm2.code = '123456' // 固定
          this.$message({
            message: '验证码已发送',
            type: 'success'
          })
        }
      })
    },
    goLogin() {
      this.$emit('showlogin')
    },
    setupNext() {
      if (this.setup === 1) {
        // if (/^1[3456789]\d{9}$/.test(this.userForm2.tel) === true) {
        if (this.userForm2.tel !== '') {
          // 如果输入正确的手机号码，就到下一步，并且让表单其他项目为可用状态
          this.setup++
          this.count++
          this.isDisable = false
        } else {
          this.$message({
            message: '手机号码输入不正确',
            type: 'error'
          })
        }
      } else if (this.setup === 2) {
        // if(this.userForm2.code.trim() === ""){
        //    this.$message({
        //     message: '验证码未输入',
        //     type: 'error'
        //   })
        //   return
        // }
        if (this.userForm2.pwd1 !== this.userForm2.pwd2) {
          this.$message({
            message: '2次密码不一致',
            type: 'error'
          })
          return
        }
        this.$refs['resetForm'].validate(valid => {
          if (valid) {
            // 验证码检查
            checkCode({ phone: this.userForm2.tel, code: this.userForm2.code }).then(res => {
              if (res.code === 200) {
                // 修改密码
                resetPassword({ phone: this.userForm2.tel, password: this.userForm2.pwd1 }).then(res => {
                  if (res.code === 200) {
                    // 成功修改
                    this.$message({
                      message: '修改密码成功',
                      type: 'success'
                    })
                    this.setup++
                    this.count++
                  } else {
                    this.$message({
                      message: '修改密码失败',
                      tpye: 'error'
                    })
                  }
                })
              } else {
                this.$message({
                  message: '验证码不正确',
                  type: 'error'
                })
              }
            })
          } else {
            this.$message({
              message: '表单值不完善',
              type: 'error'
            })
          }
        })
      } else if (this.setup === 3) {
        console.log('1')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.reset-pwd {
  background-color: rgba(255, 255, 255, 0.918);
  padding: 30px;
  border-radius: 3px;
  text-align: center;
  & > h3 {
    border-bottom: 1px solid gray;
    padding-bottom: 5px;
  }
}
</style>
